<template>
  <slider 
    :value="value" 
    :list="list" 
    @change="handleChange">
    <template scope="scope">
      <div class="cell-item-content">
        <p class="cell-date">{{scope.scheduleDate && new Date(scope.scheduleDate).format('MM-dd')}}</p>
        <h4 class="week-item">{{scope.scheduleWeek}}</h4>
        <small>{{scope.matchNumber}}场比赛</small>
      </div>
    </template>
  </slider>
</template>

<script>
import Slider from '../../components/Slider'
// console.log('Slider', Slider)
export default {
  components: {
    Slider
  },
  props: {
    list: {
      type: Array
    },
    value: {}
  },
  methods: {
    handleChange (value) {
      this.$emit('input', value).$emit('change', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.slider-item{
  font-size: 16px;
  padding: 16px 0;
  h4{
    font-weight: 700;
    margin: 12px 0 24px;;
  }
}
.cell-date{
  margin-top:15px;
}

</style>
